<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>灾害信息查找系统</title>
        <link rel="stylesheet" href="css/reset.css">
        <link rel="stylesheet" href="css/disasterSearch.css">
    </head>
    <body>
         <!--页头-->
         <div id="header">
             <h1>灾害信息查找系统</h1>
         </div>
         <!--页面主体-->
         <div id="section">
             <!--左-->
             <div class="asideLeftSelect textCenter">
                 <p>
                     <input type="button" value="按灾害类型查找" class="buttonSelect disasterTypeSelect border">
                 </p>
                 <p>
                     <input type="button" value="按乡镇名称查找" class="buttonSelect disasterProcessSelect">
                 </p>
             </div>
             <!--中-->
             <div class="asideMainInput">
                 <!--灾害类型-->
                 <div class="disasterFirstPart">
                     <form action="demo.asp">
                        <div class="disasterName" data-toggle="1000">
                            <span class="disasterTypeTitle">灾害类型:台风灾害 灾害特征:来袭突然，还多地方受到了破坏，直接造成民房倒塌200多间 灾害原因描述:由于受热带气压影响
                            </span>
                            <a class="rt">查看详情</a>                          
                            <div class="clear"></div>
                        </div>
                         <ul class="disasterType displayNone" data-toggle="1000">
                             <li>
                                <b>x</b>
                                 <span>灾害名称 :</span>
                                 <span class="disasterTypeName edit">台风灾害</span>
                             </li>
                            
                             <li>
                                 <span>特征描述 :</span>
                                 <span class="edit signalment">台风来袭</span>
                             </li>
                             <li class="textarea">
                                 <span class="lf">致灾原因 :</span>
                                 <div class="edit disasterReason ">尚未明确</div>
                                 
                             </li>
                             <li><button class="editFather">编辑</button></li>
                              <li>
                                 <span>灾害子类型 :</span>
                                 <ul id="disasterTypeSon">
                                    <li toggle="台风灾害1">台风灾害1</li>
                                    <li toggle="台风灾害2">台风灾害2</li>
                                    <li toggle="台风灾害2">台风灾害2</li>
                                    <li toggle="台风灾害2">台风灾害2</li>
                                 </ul>
                                 <ul id="disasterTypeSonson" class="displayNone">
                                    <li>台风一级</li>
                                    <li>台风一级</li>
                                    <li>台风一级</li>
                                 </ul>
                                <ul  class="disasterTypeSonName displayNone">
                                    <li>
                                        <span  class="sonName">灾害子类型名称 :</span>
                                        <span class="edit disasterTypeSonName">台风灾害2</span>
                                    </li>
                                    <li>
                                        <span class="sonName">灾&nbsp&nbsp&nbsp害&nbsp&nbsp&nbsp等&nbsp&nbsp&nbsp级 :</span>
                                        <span class="edit levelSon">台风二级</span>
                                    </li>
                                    <li>
                                        <span class="sonName">灾&nbsp&nbsp&nbsp害&nbsp&nbsp&nbsp强&nbsp&nbsp&nbsp度 :</span>
                                        <span class="edit scaleSon">3-6级</span>
                                    </li>
                                    <li class="textareaSon">
                                        <span class="lf sonName">灾害子类型描述:</span>
                                        <div class="disasterReason edit descriptionSon">尚未明确</div>
                                    </li>
                                    <li><button class="editSon">编辑</button></li>
                                    <li><button class="rt">删除</button></li>
                                </ul>
                                 <!-- <span class="disasterTypeSon">台风灾害1</span> -->
                             </li>
                         </ul>
                     </form>
                    
                        <ul class="page">
                            
                        </ul>
                    
                 </div>

                 <!--乡镇名称-->
                 <div class="disasterSecondPart displayNone">
                     <!--灾害过程-->
                     <form action="demo.asp">
                         <div class="villageNameBox">
                         </div>
                         <h2 class="disasterTitle textRight">
                             <span class="lf">灾害过程</span>
                             <input type="button" value="折叠" class="add">
                         </h2>
                         <ul class="disasterProcess">
                             <li>
                                 <span>灾情过程 :</span>
                                 <span class="id"></span>
                             <li>
                                 <span>开始时间 :</span>
                                 <span class="startTime"></span>
                             </li>
                             <li>
                                 <span>结束时间 :</span>
                                 <span class="endTime"></span>
                             </li>
                             <li>
                                 <span>死亡人数 :</span>
                                 <span class="diePeople"></span>
                             </li>
                             <li>
                                 <span>受伤人数 :</span>
                                 <span class="hurtPeople"></span>
                             </li>
                             <li>
                                 <span>受灾人数 :</span>
                                 <span class="affectPeople"></span>
                             </li>
                             <li>
                                 <span>房屋倒塌 :</span>
                                 <span class="collapseBuilding"></span>
                             </li>
                             <li>
                                 <span>房屋损坏 :</span>
                                 <span class="damageBuilding"></span>
                             </li>
                             <li>
                                 <span>受灾农田 :</span>
                                 <span class="damageFarm"></span>
                             </li>
                             <li>
                                 <span>经济损失 :</span>
                                 <span class="moneyLoss"></span>
                             </li>
                             <li>
                                 <span>受灾道路 :</span>
                                 <span class="damageRoad"></span>
                             </li>
                             <li>
                                 <span>影响总面积 :</span>
                                 <span class="affectArea"></span>
                             </li>
                             <li class="textarea">
                                 <span class="lf">灾情描述 :</span>
                                 <div class="description"></div>
                             </li>
                             <li class="textarea">
                                 <span class="lf">损失描述 :</span>
                                 <div class="lossDescription"></div>
                             </li>
                         </ul>
                     </form>
                     <!--灾情信息-->
                     <form action="demo.asp">
                         <h2 class="disasterTitle textRight">
                             <span class="lf">灾情信息</span>
                             <input type="button" value="打开" class="add">
                         </h2>
                         <ul class="disasterInfo displayNone">
                             <li>
                                 <span>灾情信息 :</span>
                                 <span class="id"></span>
                             </li>
                             <li>
                                 <span>灾情过程 :</span>
                                 <span class="disasterProcessId"></span>
                             </li>
                             <li>
                                 <span>灾害类型 :</span>
                                 <span class="disasterTypeId"></span>
                             </li>
                             <li>
                                 <span>灾害子类型 :</span>
                                 <span class="disasterSubtypeId"></span>
                             </li>
                             <li>
                                 <span>灾害强度 :</span>
                                 <span class="strengthId"></span>
                             </li>
                             <li>
                                 <span>灾情起因 :</span>
                                 <span class="causes"></span>
                             </li>
                             <li>
                                 <span>后期影响 :</span>
                                 <span class="laterInfulence"></span>
                             </li>
                             <li>
                                 <span>灾情描述 :</span>
                                 <span class="description"></span>
                             </li>
                         </ul>
                     </form>
                 </div>
             </div>
         </div>
         <script src="js/jquery-1.11.3.js"></script>
         <script src="js/disasterSearch.js"></script>
    </body>
</html>